<template>
  <basic-container v-loading="loading" height="100%">
    <el-tabs v-model="tabDetailPane" type="border-card">
      <el-tab-pane label="表单" name="actMainForm">
        <start-panel v-if="procFormConfig" :content-types="['body']">
          <proc-main-form :form-config="procFormConfig" v-model="procFormData"></proc-main-form>

        </start-panel>
      </el-tab-pane>
      <el-tab-pane label="正文"  v-if="startPropTools.eq(procFunConfig,'zenWenDocumentPanel','true')" name="zenWenDoc">
        <start-office v-model="officeOssId" :edit="false" style="height: 600px" empty-text="无正文内容"
                      ref="startOffice"></start-office>
      </el-tab-pane>
      <el-tab-pane label="审批记录" name="authHistory">
        <start-panel v-if="historyTasks" :content-types="['body']">
          <task-history v-model="historyTasks" :start-user="procDetailModel.startUser"
                        :start-time="procDetailModel.startTime"
                        :end-time="procDetailModel.endTime"></task-history>
        </start-panel>
      </el-tab-pane>
      <el-tab-pane label="流程跟踪" name="procTrack">
        <start-panel v-if="bpmnXml" :content-types="['body']">
          <bpmn-proc-track class="bpmn-proc-track"
                           v-model="bpmnXml" :elements-history="historyActs"></bpmn-proc-track>
        </start-panel>
      </el-tab-pane>


    </el-tabs>
  </basic-container>
</template>
<script>
import StartActStart from "@/views/start/activiti/components/startActStart.vue";
import StartPanel from "components/start-panel/index.vue";
import startActApi from "@/api/start/activiti/core/startActApi";
import BpmnProcTrack from "@/views/start/activiti/components/bpmn/ProcTrack.vue";
import TaskHistory from "@/views/start/activiti/components/task/taskHistory.vue";
import ProcMainForm from "@/views/start/activiti/components/actForm/procMainForm.vue";
import useUserStore from "@/stores/useUserStore";
import StartOffice from "components/start-components/start-office/index.vue";
import startPropTools from "@/mixins/startPropTools";

export default {
  computed: {
    startPropTools() {
      return startPropTools
    }
  },
  components: {StartOffice, ProcMainForm, TaskHistory, BpmnProcTrack, StartPanel, StartActStart},
  data() {
    return {
      tabDetailPane: "actMainForm",
      loading: true,
      userId: null,
      procFormConfig: null,
      procFormData: null,
      bpmnXml: null,
      historyActs: null,
      historyTasks: null,
      procDetailModel: null,
      officeOssId: null,
      procFunConfig: {}
    }
  },
  created() {

  },
  mounted() {
    this.userId = useUserStore().userInfo.id
    let actBusinessId = this.$route.params.actBusinessId

    startActApi.getActInsDetail(actBusinessId).then(res => {
      let data = res.data.data;
      this.officeOssId = data.officeOssId
      this.procDetailModel = data
      this.procFormConfig = data.procFormConfig
      this.procFormData = data.procFormData
      this.historyActs = data.historyActs
      this.bpmnXml = data.bpmnXml
      this.historyTasks = data.historyTasks || []
      this.loading = false;
      this.procFunConfig = data.procFunConfig || {}
    })

  },
  methods: {

    loadProcDetailSuccess(data) {
      this.model = data;
      this.loading = false;
    },

    startApplySuccess() {
      this.$message.success("提交成功")
      this.$emit("submitSuccess")
      this.handleClose();
    },
    handleClose() {
      // this.clear();
      this.$router.closeRouter()
    },

  }
}

</script>
<style scoped>
.bpmn-proc-track {
  height: calc(100vh - 260px)
}
</style>
